<template>
    <h1>vue的基本信息</h1>
    <p>{{ name }}</p>
    <p>num:{{ num }}</p>
    <p>{{ arr }}</p>
    <p>props</p>
    <p>{{ title }}</p>
    <p>methods</p>
    <button @click="testFn">触发方法</button>
    <p>computed</p>
    <p>num2:{{ num2 }}</p>
    <button @click="addOne">num + 1</button>
</template>

<script>
export default{
    props:{
        title:{
            type:String,
            default:"hello world"
        }
    },
    data(){
        return{
            name:'李白',
            num:1,
            arr:[1,2,3]
        }
    },
    computed:{
        num2(){
            return this.num -1
        }
    },
    watch:{
        num:(newVal,oldVal)=>{
            console.log('newVal',newVal);
            console.log('oldVal',oldVal);
        },
        num2:(newVal,oldVal)=>{
            console.log('computed newVal',newVal);
            console.log('computed oldVal',oldVal);
        },
    },
    methods:{
        testFn(){
            console.log("testFn");
            console.log(this.name);
            console.log(this.num);
            this.name = '杜甫'
            this.test()
            this.testFn()
        },
        test(){
            console.log('test 方法');
        },
        addOne(){
            this.num = this.num + 1
        }
    }
}
</script>